<template>
  <div class="dashboard-container traditional-page">
    <div class="page-header">
      <h2 class="page-title">仪表盘</h2>
    </div>

    <el-row :gutter="20">
      <el-col :span="6" v-for="(card, index) in statCards" :key="index">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-card-content">
            <el-icon :size="40" :class="card.iconClass">
              <component :is="card.icon"></component>
            </el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ card.value }}</div>
              <div class="stat-label">{{ card.label }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>简历创建趋势</span>
              <el-radio-group v-model="timeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">本年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container">
            <!-- 这里放置图表组件 -->
            <div class="chart-placeholder">
              简历创建趋势图表
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>模板使用分布</span>
            </div>
          </template>
          <div class="chart-container">
            <!-- 这里放置图表组件 -->
            <div class="chart-placeholder">
              模板使用分布图表
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="table-row">
      <el-col :span="24">
        <el-card class="table-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>最近创建的简历</span>
              <el-button type="primary" size="small">查看全部</el-button>
            </div>
          </template>
          <div class="table-container">
            <el-table :data="recentResumes" style="width: 100%">
              <el-table-column prop="name" label="简历名称" />
              <el-table-column prop="username" label="用户姓名" />
              <el-table-column prop="template" label="使用模板" />
              <el-table-column prop="createdAt" label="创建时间" />
              <el-table-column label="操作" width="150">
                <template #default>
                  <el-button type="primary" size="small">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'Dashboard',
  setup() {
    const timeRange = ref('week')
    
    const statCards = [
      {
        icon: 'Document',
        iconClass: 'icon-resume',
        value: '1,234',
        label: '简历总数'
      },
      {
        icon: 'Files',
        iconClass: 'icon-template',
        value: '42',
        label: '模板总数'
      },
      {
        icon: 'User',
        iconClass: 'icon-user',
        value: '5,678',
        label: '用户总数'
      },
      {
        icon: 'View',
        iconClass: 'icon-view',
        value: '12,345',
        label: '本月访问量'
      }
    ]
    
    const recentResumes = [
      {
        name: '前端开发工程师简历',
        username: '张三',
        template: 'IT行业简历模板',
        createdAt: '2023-07-15 14:30:25'
      },
      {
        name: '产品经理求职简历',
        username: '李四',
        template: '互联网产品简历模板',
        createdAt: '2023-07-14 09:15:42'
      },
      {
        name: 'UI设计师作品集',
        username: '王五',
        template: '创意设计简历模板',
        createdAt: '2023-07-13 16:45:10'
      },
      {
        name: '销售经理个人简历',
        username: '赵六',
        template: '商务简历模板',
        createdAt: '2023-07-12 11:20:35'
      },
      {
        name: '软件测试工程师简历',
        username: '钱七',
        template: 'IT行业简历模板',
        createdAt: '2023-07-11 15:50:18'
      }
    ]
    
    return {
      timeRange,
      statCards,
      recentResumes
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.stat-card {
  margin-bottom: 20px;
  height: 120px;
}

.stat-card-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-info {
  margin-left: 15px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  margin-top: 5px;
}

.icon-resume {
  color: #409EFF;
}

.icon-template {
  color: #67C23A;
}

.icon-user {
  color: #E6A23C;
}

.icon-view {
  color: #F56C6C;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 350px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.chart-placeholder {
  color: #909399;
  font-size: 16px;
}

.table-row {
  margin-bottom: 20px;
}

.table-container {
  margin-top: 10px;
}
</style>